<style scoped></style>

<template>
    <div>
        <Modal
            title="修改团购信息"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
        >
            <Form ref="groupBuyForm" label-position="top" :rules="groupBuyRole" :model="groupBuy">
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="成团用户" prop="creatorUserId">
                            <Select v-model="groupBuy.creatorUserId" @on-change="selectedUser" @on-clear="selectedUser" filterable clearable placeholder="请选择成团用户">
                                <Option v-for="item in userList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="联系人" prop="linkMan">
                            <Input v-model="groupBuy.linkMan" placeholder="请输入联系人姓名"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="手机" prop="phoneNumber">
                            <Input v-model="groupBuy.phoneNumber" placeholder="请输入联系人手机号码"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="成团类型" prop="groupBuyTypeId">
                            <Select v-model="groupBuy.groupBuyTypeId" filterable clearable placeholder="请选择成团类型">
                                <Option v-for="item in groupBuyTypes" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="意向小区" prop="wantVillage">
                            <Input v-model="groupBuy.wantVillage" placeholder="请输入你期望的小区"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="12">
                        <FormItem label="意向楼层" prop="wantLayer">
                            <Input v-model="groupBuy.wantLayer" placeholder="请输入你期望的楼层"></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="意向户型" prop="wantLayout">
                            <Input v-model="groupBuy.wantLayout" placeholder="请输入你期望的户型"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import Ajax from "@/lib/ajax";
import AbpBase from "@/lib/abpbase";
import GroupBuy from "@/store/entities/groupBuy/GroupBuy";
import GroupBuyType from "@/store/entities/buyType/GroupBuyType";
import User from "@/store/entities/user";
@Component({
    components: {}
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    groupBuy: GroupBuy = new GroupBuy();
    groupBuyTypes: Array<GroupBuyType> = new Array<GroupBuyType>();
    userList: Array<User> = new Array<User>();

    curUser: User = null;


    selectedUser(e){
        if (typeof(e) == "number") {
            this.curUser = this.userList.find(item=>{
                return item.id == e;
            });
            this.groupBuy.linkMan = this.curUser.name;
            this.groupBuy.phoneNumber = this.curUser.phoneNumber;
        } else {
            this.curUser = null;
            this.groupBuy.linkMan = "";
            this.groupBuy.phoneNumber = "";
        }
    }
    async created() {
        let reponse = await Ajax.get('/api/services/app/GroupBuyType/GetAllList');
        this.groupBuyTypes = reponse.data.result;

        let rep = await Ajax.get('/api/services/app/User/GetAllList');
        this.userList = rep.data.result;
    }
    save() {
        (this.$refs.groupBuyForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await this.$store.dispatch({
                    type: "groupBuy/update",
                    data: this.groupBuy
                });
                (this.$refs.groupBuyForm as any).resetFields();

                this.$emit("save-success");
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.groupBuyForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        } else {
            this.groupBuy = Util.extend(true,{},this.$store.state.groupBuy.editGroupBuy);
        }
    }

    groupBuyRole = {
        creatorUserId: [
            {
                required: true,
                type: "number",
                message: "请选择成团用户",
                trigger: "change",
            },
        ],
        groupBuyTypeId: [
            {
                required: true,
                type: "number",
                message: "请选择成团类型",
                trigger: "change",
            },
        ],
        linkMan: [
            {
                required: true,
                type: "string",
                message: "请输入联系人",
                trigger: "blur",
            },
        ],
        phoneNumber: [
            {
                required: true,
                type: "string",
                message: "请输入手机号",
                trigger: "blur",
            },
            {
                pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
                message: '手机号码格式不正确',
                trigger: "blur",
            },
        ],
    };
}
</script>